<template>
	<view class="content" @touchmove="touchend($event)">
		<view class="top">
			<view class="top_item">
				<view class="circle active">
					<image class="img" src="/static/shimingbai.png" lazy-load="false"></image>
				</view>
				<text class="top_item_text active">实名申请</text>
			</view>
			<view class="top_item">
				<view class="circle">
					<image class="img" style="margin-left: 8rpx" src="/static/tianxiehui.png" lazy-load="false"></image>
				</view>
				<text class="top_item_text">填写借款资料</text>
			</view>
			<view class="top_item">
				<view class="circle">
					<image class="img" src="/static/fangkuanhui.png" lazy-load="false"></image>
				</view>
				<text class="top_item_text">审核放款</text>
			</view>
		</view>
		<view class="gou">一分钟填写借款资料，极速下款最高20万</view>
		<view class="p-24">
			<view class="title">
				<text class="">*</text>
				<view class="title_dec">实名申请</view>
			</view>
			<u-field v-model="form.name" label="真实姓名" input-align="right" maxlength="10" clearable placeholder="请输入您的真实姓名"></u-field>
			<u-cell-group :border="false" v-if="tep == 'xxl'">
				<u-cell-item
					title="性别"
					hover-class="none"
					@click="showSex = true"
					:valueStyle="{ color: form.sex == '' ? '#909399' : '#333333' }"
					:value="form.sex.label || '请选择'"
				></u-cell-item>
			</u-cell-group>
			<u-field v-if="tep != 'xxl'" v-model="form.idcard" label="身份证" input-align="right" maxlength="18" clearable placeholder="请输入您的身份证号"></u-field>
			<u-cell-group :border="false">
				<u-cell-item
					v-if="tep == 'xxl'"
					title="年龄"
					hover-class="none"
					@click="showAge = true"
					:valueStyle="{ color: form.age == '' ? '#909399' : '#333333' }"
					:value="form.age || '请选择'"
				></u-cell-item>
				<u-cell-item
					title="当前所在城市"
					hover-class="none"
					@click="showCity = true"
					:valueStyle="{ color: form.cityName == '' ? '#909399' : '#333333' }"
					:value="form.cityName || '请选择'"
				></u-cell-item>
				<u-cell-item
					title="职业信息"
					hover-class="none"
					@click="occupation = true"
					:valueStyle="{ color: form.occupation == '' ? '#909399' : '#333333' }"
					:value="form.occupation.label || '请选择'"
				></u-cell-item>
			</u-cell-group>
			<template v-if="form.occupation.value == 1 || form.occupation.value == 2">
				<itemInput label="月收入" number="number" maxlength="5" placeholder="请输入0~50000区间" unit="元/月" @input="onInput" />
				<view class="input_box u-border-bottom">
					<view class="input_box_title">工龄</view>
					<view class="input_box_val">
						<text v-for="(item, index) in workingData" :key="index" @click="handleItem(index, 'workingData')" :class="{ active: item.falg }">
							{{ item.label }}
						</text>
					</view>
				</view>
				<view class="input_box u-border-bottom">
					<view class="input_box_title">工资发放形式</view>
					<view class="input_box_val">
						<text v-for="(item, index) in block" :key="index" @click="handleItem(index, 'block')" :class="{ active: item.falg }">{{ item.label }}</text>
					</view>
				</view>
			</template>
			<template v-if="form.occupation.value == 3">
				<itemInput
					label="总经营流水"
					number="number"
					:key="form.occupation.value"
					maxlength="5"
					placeholder="请输入0~50000区间"
					unit="万元/月"
					@input="onInput"
				/>
				<itemInput
					label="对公账户经营收入"
					number="number"
					:key="form.occupation.value + 1"
					maxlength="5"
					placeholder="请输入0~50000区间"
					unit="万元/月"
					@input="onInput2"
				/>
				<view class="input_box_line u-border-bottom">
					<view class="input_box_title">营业执照注册年限</view>
					<view class="input_box_val">
						<text v-for="(item, index) in permit" :key="index" :class="{ active: item.falg }" @click="handleItem(index, 'permit')">{{ item.label }}</text>
					</view>
				</view>
			</template>
			<template v-if="form.occupation.value == 4">
				<itemInput
					label="总经营流水"
					number="number"
					:key="form.occupation.value"
					maxlength="5"
					placeholder="请输入0~50000区间"
					unit="万元/月"
					@input="onInput"
				/>
				<view class="input_box_line u-border-bottom">
					<view class="input_box_title">营业执照注册年限</view>
					<view class="input_box_val">
						<text v-for="(item, index) in permit" :key="index" :class="{ active: item.falg }" @click="handleItem(index, 'permit')">{{ item.label }}</text>
					</view>
				</view>
			</template>
			<template v-if="form.occupation.value == 5 || form.occupation.value == 6">
				<itemInput label="月收入" number="number" @input="onInput" :key="form.occupation.value" placeholder="请输入0~50000区间" unit="元/月" />
			</template>

			<view class="agreement_flex">
				<u-checkbox v-model="checked" size="30" label-size="26rpx">已经阅读并同意</u-checkbox>
				<text @click="openAgrment">《贷款知情书》</text>
				<!-- <text @click="openAgrment">《懂钱弟用户使用协议》</text> -->
			</view>
			<view class="agreement_flex" style="margin-top: 10rpx">
				<u-checkbox v-model="checked2" shape="circle" active-color="#BBA66D" size="30" label-size="26rpx"></u-checkbox>
				<text style="font-size: 28rpx; font-family: PingFang SC; font-weight: 400; color: #bba66d">国家级数据加密保护，仅用于贷款审核</text>
			</view>

			<view class="btn" v-if="!isActive">下一步</view>
			<view class="btn2" v-else @click="openView">下一步</view>
		</view>
		<u-select v-model="showCity" mode="mutil-column-auto" :list="cityList" @confirm="confirm"></u-select>
		<u-select v-model="occupation" mode="single-column" :list="occupationDate" @confirm="handleOccupationConfirm"></u-select>
		<u-select v-model="showAge" mode="single-column" :list="ages" @confirm="handleAgeConfirm"></u-select>
		<u-select v-model="showSex" mode="single-column" :list="sex" @confirm="handleSexConfirm"></u-select>
		<u-popup v-model="showDow" mode="center" border-radius="16" width="532rpx" height="420rpx">
			<view class="dow_box">
				<view class="dow_title">极速下款</view>
				<view class="dec">根据您的手机号信息预估可借3W额度</view>
				<view class="deposit_btn" @click="newView">立即前往提现</view>
				<view class="edit_btn" @click="showDow = false">继续填资申请(高额)</view>
			</view>
		</u-popup>
		<u-popup v-model="agreement" mode="center" border-radius="16" width="576rpx" closeable @close="popupClose">
			<view class="agreement_box">
				<view class="agreement_title">请阅读以下协议</view>
				<view class="agreement_dec">贷款知情书</view>
				<view class="divider"></view>
				<!-- 懂钱弟（以下简称“平台”)由成都躁动信息科技有限公司运营， -->
				<view class="agreement_content">
					<scroll-view scroll-y="true" style="height: 400rpx" class="scroll-Y">
						<privacy />
					</scroll-view>
				</view>
				<view class="divider"></view>
				<view class="agreement_bten" @click=";(agreement = false), (checked = true)">同意并使用</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import city from '@/utils/city.json'
import ajax from '@/api'
import { openView } from '@/utils'
import itemInput from '@/components/item-input.vue'
import privacy from '@/components/privacy.vue'
export default {
	components: {
		itemInput,
		privacy
	},
	data() {
		return {
			tep: location.href.split('/')[3],
			workingData: [
				{ value: '1', label: '0-6个月', falg: false },
				{ value: '2', label: '6-12个月', falg: false },
				{ value: '3', label: '12个月以上', falg: false }
			],
			working: false,
			money: '',
			periods: '',
			block: [
				{ label: '银行卡', value: 1, falg: false },
				{ label: '现金', value: 2, falg: false },
				{ label: '自存', value: 3, falg: false }
			],
			permit: [
				{ label: '未注册', value: 1, falg: false },
				{ label: '注册1年以下', value: 2, falg: false },
				{ label: '注册1~5年', value: 3, falg: false },
				{ label: '注册5年以上', value: 4, falg: false }
			],
			form: {
				name: '',
				idcard: '',
				income: '',
				income_g: '',
				cityName: '', //所在城市
				occupation: '', //职业
				age: '',
				sex: ''
			},
			showAge: false,
			showSex: false,
			checked: false,
			checked2: true,
			agreement: true,
			showDow: false,
			occupation: false,
			credit: false,
			ages: [],
			sex: [
				{ value: 2, label: '男' },
				{ value: 1, label: '女' }
			],
			occupationDate: [
				{
					value: '1',
					label: '上班族'
				},
				{
					value: '2',
					label: '公务员'
				},
				{
					value: '3',
					label: '企业主'
				},
				{
					value: '4',
					label: '个体户'
				},
				{
					value: '5',
					label: '自由职业'
				},
				{
					value: '6',
					label: '其他'
				}
			],
			sesame: false,
			showCity: false,
			cityList: city,
			numList: [
				{
					name: '实名申请'
				},
				{
					name: '填写借款资料'
				},
				{
					name: '审核放款'
				}
			],
			mobile: '',
			code: ''
		}
	},
	computed: {
		isActive() {
			let bool = false
			let data = JSON.parse(JSON.stringify(this.form))
			delete data.income_g
			delete data.income
			if (this.tep == 'xxl') {
				delete data.idcard
			} else {
				delete data.age
				delete data.sex
			}
			let key = Object.values(data)
			if (!key.includes('')) {
				if (this.form.occupation.value == 1 || this.form.occupation.value == 2) {
					let data = this.block.filter((item) => item.falg == true)
					let data2 = this.workingData.filter((item) => item.falg == true)
					if (data.length && data2.length && this.form.income != '') {
						bool = true
					}
				}
				if (this.form.occupation.value == 3 || this.form.occupation.value == 4) {
					let data = this.permit.filter((item) => item.falg == true)
					if (this.form.occupation.value == 3 && this.form.income_g != '' && data.length && this.form.income != '') {
						bool = true
					}
					if (this.form.occupation.value == 4 && this.form.income != '') {
						bool = true
					}
				}
				if (this.form.occupation.value == 5 || (this.form.occupation.value == 6 && this.form.income != '')) {
					bool = true
				}
			}
			return bool
		}
	},
	onLoad(ops) {
		const { money, periods } = ops
		this.money = money
		this.periods = periods
	},
	created() {
		this.ages = (() => {
			let array = []
			for (let index = 18; index < 60; index++) {
				array.push({ value: index, label: index })
			}
			return array
		})()
	},
	methods: {
		touchend() {
			uni.hideKeyboard()
		},
		openAgrment() {
			// #ifdef H5
			let name = this.tep == 'xxl' ? 'book' : 'book1'
			location.href = `https://website.zd-dqd.com/dqdxy/#/pages/agreement/${name}`
			// #endif
		},
		popupClose() {
			// if (!this.checked) {
			// 	this.showDow = true
			// }
		},
		handleItem(index, name) {
			this[name].forEach((item) => (item.falg = false))
			this[name][index].falg = true
		},
		onInput(item) {
			this.form.income = item
		},
		onInput2(item) {
			this.form.income_g = item
		},
		confirm(item) {
			this.form.cityName = `${item[0].label}-${item[1].label}`
		},
		handleCreditConfirm(item) {
			this.form.credit = item[0]
		},
		handleSesameConfirm(item) {
			this.form.sesame = item[0]
		},
		handleAgeConfirm(item) {
			this.form.age = item[0].value
		},
		handleSexConfirm(item) {
			this.form.sex = item[0]
		},
		handleOccupationConfirm(item) {
			this.block.forEach((item) => (item.falg = false))
			this.permit.forEach((item) => (item.falg = false))
			this.form.occupation = item[0]
		},
		async openView() {
			if (!this.checked) {
				uni.showToast({
					title: '请先勾选贷款知情书',
					icon: 'none',
					position: 'bottom'
				})
				return
			}
			let params = {
				name: this.form.name,
				city: this.form.cityName,
				vocation: this.form.occupation.value,
				money: this.money,
				periods: this.periods,
				income: this.form.income
			}
			if (!this.$u.test.chinese(this.form.name) || !this.$u.test.range(this.form.name.length, [2, 10])) {
				uni.showToast({
					title: '请输入合法姓名',
					icon: 'none'
				})
				return
			}
			if (this.tep != 'xxl') {
				params.idcard = this.form.idcard
				if (!this.$u.test.idCard(this.form.idcard)) {
					uni.showToast({
						title: '请输入合法身份证号',
						icon: 'none'
					})
					return
				}
			} else {
				params.sex = this.form.sex.value
				params.age = this.form.age
			}
			if (this.form.occupation == '') {
				uni.showToast({
					title: '请选职业',
					icon: 'none'
				})
				return
			}
			if (this.form.income == '') {
				const txt = this.form.occupation.value == 3 || this.form.occupation.value == 4 ? '请输入总经营流水' : '请输入收入信息'
				uni.showToast({
					title: txt,
					icon: 'none'
				})
				return
			}
			if (this.form.occupation.value == 1 || this.form.occupation.value == 2) {
				let data = this.block.filter((item) => item.falg == true)
				let data2 = this.workingData.filter((item) => item.falg == true)
				if (!data.length) {
					uni.showToast({
						title: '请选择工资发放形式',
						icon: 'none'
					})
					return
				}
				if (!data2.length) {
					uni.showToast({
						title: '请选择工龄',
						icon: 'none'
					})
					return
				}
				params.wages = data[0].value
				params.working = data2[0].value
			}
			if (this.form.occupation.value == 3 && this.form.income_g == '') {
				uni.showToast({
					title: '请输入对公账户经营收入',
					icon: 'none'
				})
				return
			}
			if (this.form.occupation.value == 3) {
				params.income_g = this.form.income_g
			}
			if (this.form.occupation.value == 3 || this.form.occupation.value == 4) {
				// permit
				let data = this.permit.filter((item) => item.falg == true)
				if (!data.length) {
					uni.showToast({
						title: '请选择营业执照注册年限',
						icon: 'none'
					})
					return
				}
				params.business = data[0].value
			}
			const res = await ajax.basicData(params)
			if (res.data.code == 200) {
				openView('/property/property', {})
			}
		},
		newView() {
			openView('/succee/succee', {})
		}
	}
}
</script>

<style lang="scss">
// #303133
// ::v-deep .u-cell__value {
// 	color: #303133;
// }
page {
	height: 100vh;
	background-color: #fff;
}
.agreement_box {
	overflow: hidden;
	padding-bottom: 20rpx;
}
.top_item_text {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
	margin-top: 8rpx;
}
.top_item_text.active {
	color: #3478f2;
}
.img {
	width: 60rpx;
	height: 60rpx;
}
.circle {
	width: 88rpx;
	height: 88rpx;
	border-radius: 100%;
	background: #e4e4e4;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.circle.active {
	background: #3478f2;
}
.circle::after {
	position: absolute;
	content: '';
	width: 200rpx;
	height: 8rpx;
	background: #d9d9d9;
	top: 50%;
	left: 87rpx;
}
.circle.active::after {
	background: #3478f2;
}
.top_item:last-child .circle::after {
	height: 0rpx;
}
.input_box_line {
	padding: 32rpx 0;
	font-size: 28rpx;
	padding-left: 28rpx;
	padding-right: 32rpx;
	color: #606266;
	.input_box_val {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #ffffff;
			border: 2rpx solid #bdbdbd;
			border-radius: 36rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #bdbdbd;
		}
	}
}
.input_box .input_box_val text.active,
.input_box_line .input_box_val text.active {
	background: #eef4fe;
	border: 2rpx solid #3478f2;
	color: #3478f2;
}
.input_box {
	display: flex;
	align-items: center;
	padding: 32rpx 0;
	font-size: 28rpx;
	padding-left: 28rpx;
	padding-right: 32rpx;
	color: #606266;
	.input_box_title {
		font-family: PingFang SC;
		font-weight: 400;
		width: 55%;
	}
	.input_box_val {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 800rpx;
		text {
			width: 136rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #ffffff;
			border: 2rpx solid #bdbdbd;
			border-radius: 36rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #bdbdbd;
		}
	}
}
.agreement_flex {
	margin-top: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
		margin-left: -20rpx;
	}
}
.agreement_bten {
	height: 70rpx;
	line-height: 70rpx;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #3478f2;
	text-align: center;
}
.divider {
	width: 564rpx;
	height: 2rpx;
	background: #e4e4e4;
	margin: 20rpx auto;
}
.agreement_content {
	padding: 10rpx 24rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 56rpx;
	color: #151515;
}
.agreement_title {
	font-size: 40rpx;
	margin-top: 50rpx;
	font-family: PingFang SC;
	font-weight: bold;
	text-align: center;
	color: #333333;
}
.agreement_dec {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	margin-top: 40rpx;
	text-align: center;
	color: #333333;
}
.dow_box {
	padding: 38rpx 0;
	text-align: center;
	.dow_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.deposit_btn {
		width: 372rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #3478f2;
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin: 44rpx auto;
	}
	.edit_btn {
		width: 372rpx;
		height: 72rpx;
		background: #ffffff;
		border: 2rpx solid #3478f2;
		border-radius: 36rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
		margin: 0 auto;
		line-height: 72rpx;
	}
	.dec {
		margin-top: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
}
.title {
	margin-left: 12rpx;
	display: flex;
	align-items: flex-start;
	text {
		color: red;
	}
}
.title_dec {
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	position: relative;
}
.title_dec::after {
	position: absolute;
	content: '';
	width: 38rpx;
	height: 4rpx;
	background: #3478f2;
	left: 0;
	bottom: -6rpx;
}
.gou {
	width: 750rpx;
	height: 64rpx;
	background: #e4eeff;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3478f2;
	line-height: 64rpx;
	text-align: center;
}
.btn {
	width: 652rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: #cccccc;
	border-radius: 44rpx;
	margin: 38rpx auto;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}
.btn2 {
	width: 652rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: #3478f2;
	border-radius: 44rpx;
	margin: 38rpx auto;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}
.top {
	width: 750rpx;
	height: 180rpx;
	background: #ffffff;
	border-radius: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 52rpx;
}
.p-24 {
	padding: 24rpx;
	background-color: #fff;
}
</style>
